<template>
  <div class="main">
  <div  style="width: 100%;margin: 0 auto">
    <el-container>
      <el-header>
      </el-header>

      <el-container >
        <el-main>
          <div style="width: 1400px;margin-top: -40px">
            <router-view/>
          </div>
        </el-main>

      </el-container>
    </el-container>
  </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import qs from "qs";
import axios from "axios";

</script>


<style scoped>
*{
  padding: 0;
  margin: 0;
}
.main{
  width:100%;
  margin-top: -0.1%;
  background: linear-gradient(-135deg, #4f03ab, #8661f5, #fcfcfc);
  background-size: 200% 200%;
  animation: moveAnimation 5s infinite;
  max-height: 180vh;
}
@keyframes moveAnimation {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 80% 70%
  }
  100% {
    background-position: 0% 70%
  }
}
button{
  background: linear-gradient(90deg, rgb(108, 66, 149), rgb(74, 66, 149));/*渐变颜色*/
  margin: 0 auto;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
button:hover{
  background: linear-gradient(45deg, #6c4295, #b78ae3);
  transform: scale(1.2); /* （120% 缩放按钮动态*/
}
</style>